import adActionType from '@/common/enum/adActionType'
export default {
  _target:'',
  _tW:0,
  _tH:0,
  _style:{},
  _size:0,
  div:null,
  _opt:{
    tpl_id:0,
    type:10,//定位类型
    position:10,//位置
    value:50,//位置调整
    size:50,//大小
    imgSrc:'',
    text:'',
    jumpSrc:'',
  },
  setParams(params){
    this._opt=Object.assign(this._opt,params)
    return this
  },
  setTarget(ele){
    this._target=ele
    const el = document.querySelector(ele)
    this._tH = el.offsetHeight
    this._tW = el.offsetWidth
    return this
  },
  getStyle(){},

  createDiv(){
    if(this.div) this.div.remove()
    this.div = document.createElement('div');
    //大小
    this._styleSize()
    switch (this._opt.tpl_id){
      case adActionType.TEACHER_QR_CODE.value:this._teacherQrcodeDiv();break;
      case adActionType.BANNER.value:this._bannerDiv();break;
    }
    for(let k in this._style){
      this.div.style[k]=this._style[k]
    }
    this.div.style.cursor='pointer'
    //位置
    this._stylePosition();
    if(this._opt.type === 20 && this._opt.position=== 10){
      document.querySelector(this._target).insertBefore(this.div,document.querySelector(this._target+' :first-child'));
    }else{
      document.querySelector(this._target).appendChild(this.div)
    }
  },
  _styleSize(){
    this._size=0
    switch (this._opt.tpl_id){
      case adActionType.TEACHER_QR_CODE.value:this._size=this._tW * 0.3;break;
      case adActionType.BANNER.value:this._size = this._tW;break;
    }
    if(this._opt.type === 10) {
      const w = this._opt.position === 20 || this._opt.position === 40?this._tH:this._tW
      this._size+=(w - this._size) * (this._opt.size / 100)
    }
  },
  //获取位置值
  _stylePosition(){
    if(this._opt.type === 10){
      //位置
      this.div.style.position='absolute' //fixed
      let value = this._opt.value;
      let w = this._opt.position === 20 || this._opt.position === 40?this._tH:this._tW
      value = ((w-this._size) * (value / 100)) + 'px'
      switch (this._opt.position){
        case 10://top
          this.div.style.top = 0
          this.div.style.left = value
          break;
        case 20://left
          this.div.style.left = 0
          this.div.style.top = value
          break;
        case 30://bottom
          this.div.style.bottom = 0
          this.div.style.left = value
          break;
        case 40://right
          this.div.style.right = 0
          this.div.style.top = value
          break;
      }
    }
  },
  _teacherQrcodeDiv(){
    this._style={
        // border:'1px solid #ccc',
        backgroundColor:'rgba(0, 0, 0, 0.08)',
        zIndex:'1',
        padding:'5px',
    }
    const qrImg=document.querySelector('#qrImg').cloneNode(true)
    qrImg.style.display = 'block'
    qrImg.style.fontSize=(this._size-10)+'px'
    this.div.appendChild(qrImg)
    const text = document.createElement('div')
    text.style.wordBreak='break-all';
    text.style.textAlign='center'
    text.innerText = this._opt.text
    if(this._opt.type === 10){
      text.style.width=(this._size-10)+'px'
      text.style.color='#fff'
    }
    this.div.appendChild(text)
  },
  _bannerDiv(){
    this._style={
      width:this._size+'px',
      // border:'3px dashed rgb(19 184 230)',
      backgroundColor:'rgba(0, 0, 0, 0.08)',
      textAlign:'center',
    }
    const self = this
    if(this._opt.jumpSrc.length > 0){
      this.div.addEventListener('click',(e)=>{
        window.open(self._opt.jumpSrc)
      })
    }
    if(this._opt.imgSrc){
      const img =document.createElement('img');
      img.style.width="100%"
      img.style.margin='auto'
      img.src=this._opt.imgSrc
      this.div.appendChild(img)
    }
  },
}